const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    del = require('del'),
    sass = require('gulp-sass'),
    cleanCss = require('gulp-clean-css'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    connect = require('gulp-connect'),
    {createProxyMiddleware} = require('http-proxy-middleware')

// 定义一个对象 集中管理所有路劲
const path = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    sass: {
        src: 'src/sass/**/*.scss',
        dest: 'dist/css'
    },
    jsPath: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    imgPath: {
        src: 'src/img/*.*',
        dest: 'dist/img'
    },
    libPath: {
        src: 'src/lib/**/**',
        dest: 'dist/lib'
    },
    iconPath: {
        src: 'src/*.ico',
        dest: 'dist'
    },
    phpPath: {
        src: 'src/php/**',
        dest: 'dist/php'
    }
}
// 定制了一个删除 dist 目录的任务 
const delDist = () => del('dist')

const { html: html1, sass: sas, jsPath, imgPath, libPath, iconPath, phpPath} = path
// 定制 html 任务
const html = () => {
    return gulp.src(html1.src)
        .pipe(htmlmin({
            removeComments: true, // 清除HTML注释
            collapseWhitespace: true, // 压缩HTML
            collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: false, // 删除<style>和<link>的type="text/css"
            minifyJS: true, // 压缩页面JS
            minifyCSS: true // 压缩页面CSS 
        }))
        .pipe(gulp.dest(html1.dest))
        .pipe(connect.reload())  //监控任务执行，执行后页面自动刷新
}

// 定制 css 任务   1、把所有 scss 转为 css( node-sass、gulp-sass)  2、压缩 css 代码( gulp-clean-css)
const css = () => {
    return gulp.src(sas.src)
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(gulp.dest(sas.dest))
        .pipe(connect.reload())  //监控任务执行，执行后页面自动刷新

}

// 定制 js 任务  1、把所有 ES6 转为 ES5 ( gulp-babel、@babel/core、@babel/preset-env)  2、压缩 js ( gulp-uglify) 
const js = () => {
    return gulp.src(jsPath.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(jsPath.dest))
        .pipe(connect.reload())  //监控任务执行，执行后页面自动刷新

}

// 把所有的 img 复制到 dist 目录
const img = () => gulp.src(imgPath.src).pipe(gulp.dest(imgPath.dest))

// 把 lib 文件夹下面的所有东西复制到 dist 目录
const libs = () => gulp.src(libPath.src).pipe(gulp.dest(libPath.dest))

// 复制 icon
const icon = () => gulp.src(iconPath.src).pipe(gulp.dest(iconPath.dest))

// 复制 php
const php = () => gulp.src(phpPath.src).pipe(gulp.dest(phpPath.dest))

// 监控html,sass,js 文件夹 当里面的文件发生改变时 再次执行任务
const watch = () => {
    gulp.watch(html1.src, html)
    gulp.watch(sas.src, css)
    gulp.watch(jsPath.src, js)
    gulp.watch(phpPath.src, php)
}
// 开启一个服务器    gulp-connect
const server = () => {
    connect.server({
        livereload: true,
        port: 2400,
        root: 'dist',
        middleware(){
            return [
                // 代理跨域：把以by开头的请求代理到 熊猫优选 的接口
                createProxyMiddleware('/by',{
                    target: 'http://xiongmaoyouxuan.com/',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/by':''
                    }
                }),
                createProxyMiddleware('/php',{
                    target: 'http://localhost:80/BiYaoProject/dist/php',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/php':''
                    }
                })
            ]
        }
    })
}


// 默认任务 执行每一个任务
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, icon, php, watch, server))